<template>
  <div class="params">
    <el-row>
      <el-col :xs="24" :sm="24" style="display:flex">
        <div class="wrapping">
          <el-select v-model="form.progress" :size="formSize" clearable placeholder="跟进状态">
            <el-option v-for="item in followUpOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="wrapping">
          <el-select v-model="form.level" :size="formSize" clearable placeholder="星级">
            <el-option v-for="item in startOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="wrapping">
          <el-select v-model="form.call" :size="formSize" clearable placeholder="通话状态">
            <el-option v-for="item in passOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="wrapping">
          <el-select v-model="form.fit" :size="formSize" clearable placeholder="是否有效">
            <el-option v-for="item in effectiveOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="wrapping">
          <el-input placeholder="城市" :size="formSize" v-model="form.city" />
        </div>
        <div class="wrapping">
          <el-input placeholder="姓名" :size="formSize" v-model="form.name" />
        </div>
        <div class="wrapping">
          <el-input placeholder="电话" :size="formSize" v-model="form.mobile" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24">
        <div v-for="(fieldItem,fieldIndex) in fieldList" :key="fieldIndex" class="wrapping">
          <div v-if="fieldItem.type===2">
            <el-select v-model="fieldItem.value1" :size="formSize" clearable :placeholder="fieldItem.fieldName">
              <el-option v-for="item in fieldItem.value" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div v-else>
            <el-input v-model="fieldItem.value1" :size="formSize" :placeholder="fieldItem.fieldName"></el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24">
        <div class="dateWrapping">
          <el-date-picker v-model="timeSlot" :size="formSize" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
        </div>

        <el-button-group>
          <el-button icon="el-icon-refresh" type="primary" :size="formSize" @click="resetForm">重置查询条件</el-button>
          <el-button icon="el-icon-search" :size="formSize" type="primary" @click="search">查询</el-button>
        </el-button-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  followUpOptions,
  startOptions,
  passOptions,
  effectiveOptions,
} from "./config";
import { mapState } from "vuex";
export default {
  data() {
    return {
      followUpOptions,
      startOptions,
      passOptions,
      effectiveOptions: effectiveOptions,
      timeSlot: "",
      form: {
        level: "",
        call: "",
        fit: "",
        progress: "",
        city: "",
        name: "",
        mobile: "",
      },
      fieldList: [],
      formSize: "small",
    };
  },

  mounted() {
    this.search();
    this.fieldList = JSON.parse(JSON.stringify(this.fieldList1));
  },
  computed: {
    ...mapState({
      fieldList1: (state) => state.myClient.fieldList,
    }),
  },
  watch: {
    fieldList1(val) {
      this.fieldList = JSON.parse(JSON.stringify(val));
    },
  },
  methods: {
    search() {
      const form = Object.assign({}, this.form);
      this.fieldList.forEach((element, index) => {
        form["field" + (index + 1)] = element.value1;
      });
      if (this.timeSlot) {
        form.startDate = this.timeSlot[0];
        form.endDate = this.timeSlot[1];
      }
      // form.startDate = '2021-06-20'
      // form.endDate = '2021-06-20'

      this.$emit("search", form);
    },
    resetForm() {
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          this.form[key] = "";
        }
      }
      this.timeSlot = "";
      this.fieldList.forEach((element) => {
        element.value1 = "";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.params {
  padding-top: 20px;
  .wrapping {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
